<template>
  <Dialog
    :visible="editDialogVisible"
    @close="hangleCloseEditDialog"
    title="编辑社团"
    width="40%"
  >
    <el-form :model="editForm" :rules="rules" label-position="top" ref="formRef" class="myform">
      <div class="top">
        <el-form-item label="社团名称" prop="organizationName">
          <el-input v-model="editForm.organizationName"></el-input>
        </el-form-item>

        <el-form-item label="社团老师" prop="organizationPrincipal">
          <el-input v-model="editForm.organizationPrincipal"></el-input>
        </el-form-item>
      </div>

      <el-form-item label-width="100px" label="创建时间" prop="organizationCreateTime">
          <el-date-picker
            v-model="editForm.organizationCreateTime"
            type="date"
            placeholder="请选择"
          />
        </el-form-item>

      <el-form-item label="社团简介" prop="organizationProfile">
          <el-input v-model="editForm.organizationProfile" 
          type = "textarea"
          ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hangleCloseEditDialog">取消</el-button>
        <el-button type="primary" @click="hangleUpdate">更新</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'

import Dialog from '@/components/common/Dialog.vue';

const props = defineProps(["editDialogVisible", "editForm"]);
const emits = defineEmits(["closeEditDialog", "update"]);

const formRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  organizationName: [
    {
      required: true,
      message: '请输入社团名称',
      trigger: 'input',
    },
  ],
  organizationPrincipal: [
    {
      required: true,
      message: '请输入社团老师',
      trigger: 'input',
    },
  ],
  organizationCreateTime: [
    {
      required: true,
      message: '请选择创建时间',
      trigger: 'change'
    }
  ],
  organizationProfile: [
    {
      required: true,
      message: '请输入社团简介',
      trigger: 'input',
    },
  ],
});

const hangleCloseEditDialog = () => {
  emits("closeEditDialog");
};

const hangleUpdate = async () => {

  if (formRef.value) {
    await (formRef.value as FormInstance).validate((valid: boolean, fields) => {

      if (valid) {
        emits("update");
      } else {
        console.log(fields);
      }
    })
  }

};
</script>

<style lang="less" scoped>
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
  width: 48%;
}

.myform {
  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;

    :deep(.el-form-item) {
      width: 48%;
    }
  }

  :deep(.el-textarea__inner) {
    height: 100px;
    resize: none;
  }
}
</style>
